<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js练习4</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            background: #fff;
            padding: 20px;
            margin: 20px auto;
            width: 82%;
            border: 1px solid #e8f3ec;
            border-bottom: 9px solid #E7EFF1;

        }

        td {
            display: inline-flex;
            width: 198px;
            height: 38px;
            line-height: 38px;
            border-collapse: collapse;
            border: 1px solid #dddddd;
        }

        .div2 div {
            width: 95%;
        }

        .div21 {
            display: block;
        }

        .div22 {
            display: none;
        }

        .div23 {
            display: none;
        }

        .div24 {
            display: none;
        }
        .input3,.se3,.btn3{
            display: inline-block;
            height: 30px;
        }
        .hide{

        }
        .show{

        }
    </style>
</head>
<body>
<div>
    <div class="div1">
        1、表格隔行变色和移入变色<br>
        <button>开启隔行变色</button>
        <button>开启移入变色</button>
        <br>
        <table class="tab">
            <thead>
            <tr>
                <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>尹一</td>
                <td>11</td>
            </tr>
            <tr>
                <td>2</td>
                <td>尔二</td>
                <td>22</td>
            </tr>
            <tr>
                <td>3</td>
                <td>山三</td>
                <td>33</td>
            </tr>
            <tr>
                <td>4</td>
                <td>司四</td>
                <td>44</td>
            </tr>
            <tr>
                <td>5</td>
                <td>吴五</td>
                <td>55</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="div2">
        <button class="b21">栏目一</button>
        <button class="b2">栏目二</button>
        <button class="b2">栏目三</button>
        <button class="b2">栏目四</button>
        <div class="div21">
            栏目一的内容<br>
            栏目一的内容<br>
            栏目一的内容<br>
            栏目一的内容<br>
        </div>
        <div class="div22">
            栏目二的内容<br>
            栏目二的内容<br>
            栏目二的内容<br>
            栏目二的内容<br>
        </div>
        <div class="div23">
            栏目三的内容<br>
            栏目三的内容<br>
            栏目三的内容<br>
            栏目三的内容<br>
        </div>
        <div class="div24">
            栏目四的内容<br>
            栏目四的内容<br>
            栏目四的内容<br>
            栏目四的内容<br>
        </div>
    </div>
    <div class="div3">
       4、switch问候<br>
        <input class="input3" type="text" placeholder="姓名">
        <select class="se3">
            <option value="0">性别</option>
            <option value="1">男</option>
            <option value="2">女</option>
        </select>
        <button class="btn3">问候</button>
    </div>
</div>
<script>
    function dis(Btn2,Div2,classa,classb) {//定义一个方法
        for (var x=0;x<Btn2.length;x++){//判断点击哪个button
            Btn2[x].index=x;
            Btn2[x].onclick=function () {
                for (var x=0;x<Btn2.length;x++){
                    Btn2[x].className=classa;
                    Div2[x].style.display="none";
                }
                this.className=classb;
                Div2[this.index].style.display="block";
            }
        }
    }
    window.onload = function () {
        var div1 = document.getElementsByClassName("div1")[0];
        var btn1 = div1.getElementsByTagName("button");
        var tr1 = div1.getElementsByTagName("tr");
        btn1[0].onclick = function () {
            for (var i = 0; i < tr1.length; i++) {
                if (i % 2 == 1) {
                    tr1[i].style.background = "red";
                }
            }
        }
        btn1[1].onclick=function () {
            var tr=div1.getElementsByTagName("tr“）；
            tr.addEventListener("mousemove",function () {

            })
        }

        var div2 = document.getElementsByClassName("div2")[0];//d第二个
        var btn2 = div2.getElementsByTagName("button");
        var divv = div2.getElementsByTagName("div");
        dis(btn2,divv,"b2","b21.action");

        var div3=document.getElementsByClassName("div3")[0];//第三个
        var input3=div3.getElementsByTagName("input")[0];
        var se3=div3.getElementsByTagName("select")[0];
        var btn3=div3.getElementsByTagName("button")[0];
        btn3.onclick=function () {
            if (input3.value==""||!isNaN(input3.value)){
                alert("信息不完善或不符合格式，请重新输入");
            }
            else {
                var names=input3.value;//重新定义输入的名字
                var sex=se3.options[se3.selectedIndex].innerHTML;//获取option上传的值
                switch (sex){
                    case "性别":
                        alert(names+"你好");
                    break;
                    case  "男":
                        alert(names+"先生，你好");
                    break;
                    default:
                        alert(names+"女士，你好");
                }
            }
        }


    }
</script>
</body>
</html>